<template>
    <div id="app" class="homePage">
        <loading v-if="loading"></loading>
        <div v-else>
            <div class="banner" id="banner-normal"  @click="bigPicture(true)"> 
                <swiper :options="swiperOptionSimple"  ref="mySwiper" >
                    <swiper-slide v-for="(item,index) in userinfo.user_image" :key="item.id" :style="{'background-image':'url('+item+')','background-size':'cover','height':'6.69rem'}"></swiper-slide>
                    <div class="swiper-pagination flex" slot="pagination" style="width: .8rem;background: #000000;color: #fff;border-radius: .17rem;padding:1px 0;}"></div>
                </swiper>
            </div>
            <!-- 大图 -->
            <div class="banner" id="isBig" style="top: 0;left: 0;width: 7.5rem; z-index: 999; opacity: 0;display: none;position: fixed;" @click="bigPicture(false)">
              <swiper class="relative" :options="swiperOptionSimpleBig" style="z-index: 0;height: 100%;" ref="mySwiperBig" id="swiper">
                  <swiper-slide v-for="(item,index) in userinfo.user_image" :key="item.id" :style="{'background':'url('+item+') no-repeat','background-size':'100%','background-position': 'center','width':'7.5rem'}"></swiper-slide>
                  <div class="swiper-pagination" id="swiper-pagination-big" slot="pagination"></div>
              </swiper>
              <div class="popup z-fixed" @click="bigPicture(false)" ><div class="bg" id="bg_big_picture" style="background:#fff;"></div></div>
            </div>
            <!-- 基本信息-->
            <div>
                <div class="banner-controller relative">
                  <img :src="userinfo.head" class="user_head absolute">
                  <img v-if="userinfo.is_follow == 0 && t && curreny.uid != uid" src="../../../assets/img/follow_icon.png" class="follow_icon absolute" @click="followUser"/>
                  <img v-if="userinfo.is_follow == 1 && t && curreny.uid != uid" src="../../../assets/img/cancel_follow_icon.png" class="follow_icon absolute" @click="followUser"/>
                  <div class="flex" style="justify-content: flex-end;margin-right: .38rem;padding-top: .37rem;">
                      <span class="follow_number" v-text="userinfo.follow"></span><span class="follow_text">关注</span><span class="verical_hr"></span><span class="follow_number" v-text="userinfo.fans"></span><span class="follow_text">粉丝</span>
                  </div>
                  <div style="margin-bottom: .1rem;display: flex; align-items: center;margin-top: .26rem;">
                    <div class="name moreDot" v-text="userinfo.nickname"></div>
                    <img v-if="userinfo.sex==2" src="../../../assets/img/sex-female.png" class="sex-btn"/>
                    <img v-else src="../../../assets/img/sex-male.png" class="sex-btn"/>
                    <div class="constellation center" v-for="(tag,idx) in userinfo.custom_tag"  v-text="tag"></div>
                  </div>
                  <div  class="sex_vip">
                    <div v-if="userinfo.beautiful_cover" class="beautiful_uid center flex" :style="{'background-image':'url('+userinfo.beautiful_cover+')','background-size':'100% 100%'}">
                       <div v-text="'ID:'+userinfo.beautiful_uid"></div>
                    </div>
                    <div  v-else class="beautiful_uid center flex" :style="{'background':'#f5f5f5','border-radius': '.04rem'}">
                       <div v-text="'ID:'+userinfo.beautiful_uid"></div>
                    </div>
                    <div class="flex">
                      <img v-if="userinfo.level_id>0" :src="require('../../../assets/img/vip_icon'+userinfo.level_id+'.png')" class="vip_icon" />
                    </div>
                  </div>
                  <div v-text="userinfo.sign" class="user_desc"></div>
                  <div class="banner_bottom">
                    <div>
                      <span v-if="skillList.length>0 && userHomeCount.orderNum>0" class="homepage-number" v-text="userHomeCount.orderNum"></span>
                      <span v-if="skillList.length>0 && userHomeCount.orderNum>0" class="homepage-text">接单</span>
                      <span class="homepage-number">{{userHomeCount.inMoney | number}}</span>
                      <span class="homepage-text">收入</span>
                      <span class="homepage-number">{{userHomeCount.outMoney | number}}</span>
                      <span class="homepage-text">消费</span>
                    </div>
                  </div>
                  <div style="padding-top:.45rem;margin-right: .38rem;" class="flex-between">
                      <div>
                          <span class="follow_text" v-text="userinfo.city_name"></span><span class="verical_hr" v-if="userinfo.city_name && userinfo.last_login_time"></span><span class="follow_text" v-text="userinfo.last_login_time"></span>
                      </div>
                      <div class="relative">
                        <aplayer v-if="userinfo.voice" class="common_btn video_btn" style="border-radius: .1rem;width:1.05rem;box-shadow:none;margin:0;" :music="{src: userinfo.voice}"  ref="player">
                        </aplayer>
                        <div v-if="userinfo.voice" v-text="duration" class="duration absolute text-right" @click="operaAudio"></div> 
                      </div>
                  </div>
                </div>
            </div>
            <!-- 技能 -->
            <div class="gray_bg"></div>
            <div class="bar-area" v-if="skillList.length>0 && !isCheck">
              <div class="top text-left">
                  <span class="bar-title">Ta的技能</span>
              </div>
              <div class="main">
                <div class="skills-list">
                  <div class="item" v-for="(item,index) in skillList">
                    <div style="width: .98rem;"><img :src="item.head" class="skill-icon" :alt="item.title" /></div>
                    <div style="width: 3.42rem; padding-bottom: .2rem;" class="text-left">
                      <div class="skill-first flex" style="justify-content: flex-start;">
                        <div class="skill-name" v-text="item.title"></div>
                        <div class="skill-number center flex">
                          <div v-text="item.order_count+'单'"></div>
                        </div>
                      </div>
                      <p class="skill-label" style="line-height: .5rem;">
                        <span v-for="(tag,idx) in item.tags" v-text="tag" class="moreDot"></span>
                      </p>
                    </div>
                    <div class="skill-evaluate" style="width: 1.9rem;">
                      <div class="star text-right">
                        <img v-if="item.star==0" v-for="(star,index) in starArray" src="../../../assets/img/skill-star-no.png" class="skill-star" />
                        
                        <img v-if="item.star>=1" src="../../../assets/img/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=2" src="../../../assets/img/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=3" src="../../../assets/img/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=4" src="../../../assets/img/skill-star.png" class="skill-star" />
                        <img v-if="item.star>=5" src="../../../assets/img/skill-star.png" class="skill-star" />
                        <img v-if="item.half_star>=5" src="../../../assets/img/skill-half-star.png" class="skill-star">
                        <span v-text="item.star"></span></div>
                      <div class="price">￥{{item.price}}/{{item.units}}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
           
            <!-- 房间中 -->
            <div class="gray_bg" v-if="userHomeCount.chatroom_id!=0"></div>
            <div class="bar-area" v-if="userHomeCount.chatroom_id!=0">
              <div class="top text-left">
                  <span class="bar-title">Ta的位置</span>
              </div>
              <div class="main relative">
                <div class="skills-list">
                  <div class="item">
                    <div style="display: flex;">
                      <img :src="userHomeCount.cover" class="skill-icon" @error="defaultRoomCover"/>
                      <div>
                        <p class="skill-first"><span class="skill-name" v-text="userHomeCount.title"></span></p>
                        <p class="sing-person-number center">
                          {{userHomeCount.init_count}}人在线
                        </p>
                      </div>
                    </div>
                    <div class="sing-button common_btn" @click="enterRoomFun" >飞奔过去</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 资料 -->
            <div class="gray_bg"></div>
            <div class="bar-area" style="padding-bottom: .43rem;">
              <div class="top text-left">
                  <span class="bar-title">个人资料</span>
              </div>
              <div class="homepage-info">
                <div><span>昵称：</span><span v-text="userinfo.nickname"></span></div>
                <div><span>性别：</span><span v-text="userinfo.sex==2?'女':'男'"></span></div>
                <div><span>年龄：</span><span v-text="userinfo.age"></span></div>
                <div><span>ID：</span><span v-text="userinfo.beautiful_uid"></span></div>
                <div v-if="userinfo.constellation"><span>星座：</span><span v-text="userinfo.constellation"></span></div>
                <div v-if="userinfo.sign"><span>个人签名：</span><span v-text="userinfo.sign"></span></div>
              </div>
            </div>

            <!-- 礼物墙 -->
            <div class="gray_bg"></div>
            <div class="bar-area" style="width: 7.5rem;">
              <div class="top text-left" style="margin-bottom: .5rem;margin-left: .3rem;">
                  <span class="bar-title">Ta的礼物墙</span>
              </div>
              <div class="gift-wall">
                <div @click="searchGift(1)" :class="{'wall-active':current == 1,'wall-normal':current ==2}">
                    <div class="top-title center flex">
                      <span class="gift-name" v-text="giftObj.inName"></span>
                    </div>
                    <div>
                        <p class="bottom"><span class="gift-number" v-text="giftObj.inMoney"></span></p>
                        <p class="bottom"><span>收到礼物</span></p>
                    </div>
                </div>
                <div @click="searchGift(2)" :class="{'wall-active':current == 2,'wall-normal':current ==1}">
                    <div class="top-title center flex">
                      <span class="gift-name" v-text="giftObj.outName"></span>
                    </div>
                    <div>
                        <p class="bottom"><span class="gift-number" v-text="giftObj.outMoney"></span></p>
                        <p class="bottom"><span>送出礼物</span></p>
                    </div>
                </div>
              </div>
              <div class="gift-list" v-show="giftList.length>0">
                <div class="swiper-container-gift">
                      <div class="gift-item">
                           <div class="relative g-item" v-for="(gift,index) in giftList">
                              <div class="gift-img"><img :src="gift.logo" /></div>
                              <div class="gift-name moreDot" v-text="gift.title"></div>
                              <div class="gift-wall-number-bg">
                                  <div class="gift-wall-number center flex"><span v-text="'×'+gift.medal"></span></div>
                              </div>
                            </div>
                      </div>
                </div>
              </div>
              <div v-show="giftList.length==0" @click="getGiftList()">
                <div class="flex" >
                  <img src="../../../assets/img/no-data-gift.png" alt="点击屏幕，重新加载~" class="no-data-gift"/>
                </div>
                <div class="default-text center" style="margin-top:0;margin-bottom:.5rem;">{{current==1?'空荡荡的盒子，一件礼物也没收到~':'TA很懒，一件礼物也没送~'}}</div>
              </div>
            </div>
            <div class="gray_bg" style="height: .35rem;" v-if="t && curreny.uid != uid"></div>

            <!-- 底部操作按钮  -->
            <div class="footer" v-if="t && curreny.uid != uid">
              <div @click="sendMessageFun">
                  <div class="center common_btn" >
                  <img src="../../../assets/img/sendmessage.png" alt="发送消息">发送消息
                </div>
              </div>
              <div  @click="placeOrder(1)" v-if="skillList.skillNumber>0 && !isCheck">
                 <div class="center common_btn"  style="border-left: .02rem solid #fff;">
                  <img src="../../../assets/img/orderdown.png" alt="立即下单">立即下单
                </div>
              </div>
            </div>

            <!-- 底部下单选择弹框 -->
            <div class="popup z-fixed" v-show="orderStep!=0">
                <div class="bg" v-if="orderStep!=0" @click="placeOrder(0)"></div>
                <div class="bomb-box">
                  <div class="relative center" v-if="orderStep == 1">
                      <div class="title">选择技能</div>
                      <div><img src="../../../assets/img/close_icon.png" class="close_icon absolute" @click="placeOrder(0)" /></div>
                      <div class="select_skill_list">
                        <div class="flex-between" @click="selectSkill(skill)" v-for="(skill,idx) in skillList" v-if="skill.stop_order==0">
                            <div v-text="skill.game_title+skill.title" ></div>
                            <div><span class="pay_type_icon" style="    vertical-align: -.05rem;" :class="{'pay_type_icon_active':orderObj.adder_id==skill.adder_id}"></span></div>
                        </div>
                      </div>
                      <div class="submit_btn common_btn"  @click="placeOrder(2)">下一步</div>
                  </div>
                  <div class="relative orderStep2" v-show="orderStep == 2">
                        <div style="height: .32rem;margin-top: .3rem;">
                          <img src="../../../assets/img/back_icon.png" class="back_icon absolute" @click="placeOrder(1)" />
                          <img src="../../../assets/img/close_icon.png" class="close_icon absolute" @click="placeOrder(0)" />
                        </div>
                        <div class="title_left text_left">填写信息</div>
                        <div class="place_order_form">
                          <div>
                            <div class="info-title">服务类型</div>
                            <div class="form_value flex-between"><span v-text="orderObj.title"></span></div>
                          </div>
                          <div v-show="paragraphObj.game_regional_locate.length>0" @click="showSelectBox(1)"  id="trigger1">
                            <div class="info-title" v-text="'选择'+paragraphObj.game_regional_locate[0]"></div>
                            <div class="form_value flex-between"><span v-text="orderObj.regional_title"></span><span class="arrow_icon"></span></div>
                          </div>
                          <div v-show="paragraphObj.game_regional_locate.length>1" @click="showSelectBox(2)" id="trigger2">
                            <div class="info-title" v-text="'选择'+paragraphObj.game_regional_locate[1]"></div>
                            <div class="form_value flex-between"><span v-text="orderObj.grade_title"></span><span class="arrow_icon"></span></div>
                          </div>
                          <!--  style="height: 1rem;line-height: .4rem;padding-top: .2rem;" -->
                          <div>
                            <div class="info-title">选择价格</div>
                            <div class="form_value flex-between">
                              <!-- <span>我的段位：白银以下</span><span class="arrow_icon"></span> -->
                              <p class="form_price" v-text="'￥'+orderObj.price+'/'+orderObj.units"></p>
                            </div>
                          </div>
                          <div style="border-bottom: 0;"  @click="showSelectBox(3)" id="trigger3">
                            <div class="info-title">选择时长</div>
                            <div class="form_value flex-between"><span v-text="(orderObj.times || 0)+orderObj.units+'(合计'+((orderObj.times*orderObj.price) || 0)+'元)'"></span><span class="arrow_icon"></span></div>
                          </div>
                        </div>
                        <div class="submit_btn center common_btn"  @click="placeOrder(3)">立即下单</div>
                  </div>
                  <div class="relative orderStep3" v-if="orderStep == 3">
                        <div style="height: .32rem;margin-top: .3rem;">
                          <img src="../../../assets/img/back_icon.png" class="back_icon absolute" @click="placeOrder(2)" />
                          <img src="../../../assets/img/close_icon.png" class="close_icon absolute" @click="placeOrder(0)" />
                        </div>
                        <div class="title_left text_left">订单信息</div>
                        <div class="place_order_form">
                          <div class="relative" style="height: 1.2rem;line-height: .5rem;padding-top: .2rem;margin-right: .46rem;">
                            <div>
                              <span class="type_name"  v-text="orderObj.game_title"></span>
                              <p class="server_type absolute" v-text="orderObj.title"></p>
                            </div>
                            <div class="text-right">
                              <span style="font-size: .28rem;color: #F8A130;" v-text="'￥'+orderObj.price+'/'+orderObj.units"></span>
                              <p class="text-right" v-if="orderObj.grade_title" v-text="orderObj.grade_title+' ×'+orderObj.times"></p>
                              <p class="text-right" v-else v-text="orderObj.times"></p>
                            </div>
                          </div>
                          <div  @click="enterCoupon" style="margin-right: .46rem;">
                            <div class="type_name">选择优惠券</div>
                            <div class="discount">
                                 <!-- v-text="'满'+orderObj.limit_price+'减'+orderObj.reduce_price" -->
                                <span v-if="orderObj.red_packet_id" class="discount_value" v-text="'-'+orderObj.reduce_price+'元'"></span>
                                <span class="arrow_icon"></span>
                            </div>
                          </div>

                          <div style="border-bottom: 0;margin-right: .46rem;">
                            <div><span class="type_name">总计</span><span class="discount" v-if="orderObj.red_packet_id" v-text="'（已优惠'+orderObj.reduce_price+'元）'"></span></div>
                            <div>
                              <span class="form_price" style="font-size: .3rem;">￥</span>
                              <span class="form_price" v-if="orderObj.reduce_price" style="font-size: .4rem;font-family: 'Gobold-Regular'" v-text="((orderObj.times*orderObj.price)-orderObj.reduce_price) || 0">0</span>
                              <span class="form_price" v-else style="font-size: .4rem;font-family: 'Gobold-Regular'" v-text="(orderObj.times*orderObj.price) || 0">0</span>
                            </div>
                          </div>
                        </div>
                        <div class="hr"></div>
                        <!-- <div class="title_left text_left">请选择支付方式</div> -->
                        <div class="place_order_form pay_form" style="0 0 0 .46rem;">
                          <div @click="selectPayType(3)" class="relative">
                            <div>
                              <img src="../../../assets/img/wallet_icon.png" class="pay_icon" />
                              
                              <!-- <p class="wallet_pay_discount absolute">桃宝宝支付，最高减免188元</p> -->
                            </div>
                            <div class="form_value flex-between"><span class="type_name" v-text="'钱包支付（￥'+curreny.money+'）'"></span><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '3'}"></span></div>
                          </div>
                          <div @click="selectPayType(2)" v-if="platform == 'android'">
                            <div>
                              <img src="../../../assets/img/zhifubao_icon.png" class="pay_icon" />
                            </div>
                            <div class="form_value flex-between"><span class="type_name">支付宝支付</span><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '2'}"></span></div>
                          </div>
                          <div @click="selectPayType(4)" v-if="platform == 'ios'">
                            <div>
                              <img src="../../../assets/img/zhifubao_icon.png" class="pay_icon" />
                            </div>
                            <div class="form_value flex-between"><span class="type_name">支付宝支付</span><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '4'}"></span></div>
                          </div>
                          <div @click="selectPayType(1)">
                            <div>
                              <img src="../../../assets/img/wechat_icon.png" class="pay_icon" />
                            </div>
                            <div class="form_value flex-between">
                              <span class="type_name">微信支付</span><span class="pay_type_icon" :class="{'pay_type_icon_active':pay_type == '1'}"></span></div>
                          </div>
                        </div>
                        <div class="submit_btn center common_btn" v-if="isRecharge" @click="rechargeFun">余额不足，前往充值</div>
                        <div class="submit_btn center common_btn" v-else @click="submitOrder">确认付款</div>
                  </div>
                </div>   
            </div>
        </div>
    </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import './index.css';
import { swiper,swiperSlide } from 'vue-awesome-swiper'
import 'assets/js/mobile.select.min';
import common from 'assets/js/common';
import Aplayer from 'vue-aplayer'
import Loading from "components/loading.vue"
export default {  
  data(){
    return {
        starArray:[1,2,3,4,5],
        defaultIndex:0,
        defaultIndexBig:0,
        speed:0,
        uid:'',
        loading:true,
        userinfo:{}, //用户信息
        userHomeCount:{},//消费信息
        skillList:[],//技能列表
        current:1, //当前礼物选中索引
        orderStep:0, //下单步骤
        temporaryStep:0,//存储临时步骤 步骤2 下拉选择使用
        orderObj:{},//下单信息存储
        giftObj:{}, //礼物对象
        giftList:[],//礼物数组
        paragraphCurrent:1,//下拉选择的索引 1：大区 2：段位
        paragraphObj:{
            game_regional_locate:[]
        },//后台返回的段位和大区信息
        curreny:{},//余额信息
        pay_type:'',//支付方式
        isRecharge:false,//是否要去充值
        t:localStorage.token,
        bannerIndex:0,
        platform:'h5',
        swiperOptionSimple:{
          initialSlide:0,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true,//修改swiper的父元素时，自动初始化swiper
          loop: true,
          notNextTick: true, 
          mousewheel: true,
          pagination: '.swiper-pagination',
          paginationType:'fraction',
          onSlideChangeEnd: swiper => {
            this.bannerIndex = swiper.realIndex;
          },
          onClick:swiper=>{
            this.bannerIndex = swiper.realIndex;
          }
        },
        swiperOptionSimpleBig:{
          initialSlide:0,
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true,//修改swiper的父元素时，自动初始化swiper
          loop: true,
          notNextTick: true, 
          mousewheel: true,
          paginationType:'fraction',
          pagination: '#swiper-pagination-big',
          onSlideChangeEnd: swiper => {
            this.bannerIndex = swiper.realIndex;
          },
          onClick:swiper=>{
            this.bannerIndex = swiper.realIndex;
          }
        },
        isCheck:'',
        duration:''
    }
  },
  components: {Aplayer,swiper,swiperSlide,Loading},
  computed: {
      swiper() {
          var obj = {
            swiper:this.$refs.mySwiper.swiper,
            swiperBig:this.$refs.mySwiperBig.swiper
          }
          return obj;
      }
  },
  mounted:function(){
      this.platform = common.platform;
      //进入页面直接执行 暂时注释平台获取
      this.uid = common.getQueryString('uid');
      let isCheck= common.getQueryString('isCheck');
      //console.log(isCheck);
      if(isCheck == "#/"){
         this.isCheck = '';
      }else{
        this.isCheck = isCheck;
      }
      this.getUserInfo();
      //发消息
      window["sendMessageFun"] = ()=>{
        if(this.platform == 'ios'){
            sendMessage();
        }else{
            window.user.contact(parseInt(this.uid));
        }
      }

      //进入聊天室
      window["enterRoomFun"] = ()=>{
        if(this.platform == 'ios'){
            enterRoom(this.userHomeCount.chatroom_id);
        }else{
            window.user.goingChatRoom(this.userHomeCount.chatroom_id);
        }
      }
      //下单余额不足去充值
      window["rechargeFun"] = ()=>{
        if(this.platform == 'ios'){
            recharge();
        }else{
            window.user.recharge();
        }
      }
      //支付
      window["payFun"] = (result)=>{
        if(this.platform == 'ios'){
            pay(JSON.stringify(result));
        }else{
            window.user.pay(JSON.stringify(result),parseInt(this.uid));
        }
      }
      //分享图片封面第一张
      window["sharePirtureUrl"] = (sharePirture)=>{
        if(this.platform == 'ios'){
            try {
               sharePirture(sharePirture);
            }catch(err){
            }
        }
      }

      //获取充值结果
      window["getRechargeResult"] = ()=>{
          this.getCurreny();
      }

      //点击大区域也可以播放暂停
      $(".video_btn").on("click",function(){
        $(".aplayer-button").click();
      })
      
  }, 
  beforeRouteLeave(to, from, next) {
    if (to.path == "/") {
      to.meta.keepAlive = true;
    } else {
      to.meta.keepAlive = false;
    }
    next();
  },
  created(){
    localStorage.clear("coupon");
  },
  activated(){
    this.getCouponItem();
  },
  watch:{
    userinfo :function(newValue,oldValue){
        if(newValue.voice){
            $(".aplayer-pic,.duration").click();
            let times = setInterval(()=>{
                var v = document.querySelector('audio');
                if(v){
                  if(v.duration){
                     this.duration = parseInt(v.duration)+'s’';
                     clearInterval(times);
                  }else{
                      v.addEventListener("durationchange", ()=>{ 
                      if(v.duration){
                         this.duration = parseInt(v.duration)+'s’';
                         clearInterval(times);
                      }
                    }, true);
                  }
                }
            },1000); 
        }
    }     
  },  
  destroyed:function(){
    this.stopAudio();
  },
  methods: {
      operaAudio:function(){
        let audio =document.querySelector('audio');
        if(audio){
          if(!audio.paused){
              audio.pause();// 这个就是暂停
          }else{
              audio.play();// 这个就是暂停
          }
        }
      },
      stopAudio:function(){
          let audio =document.querySelector('audio');
          if(audio){
            if(!audio.paused){
                audio.pause();// 这个就是暂停
            }
          }
      },
      defaultRoomCover:function(){
          this.userHomeCount.cover = require("assets/img/chatroom_default.png");
      },
      //分割指定长度的数组
      sliceArray:function(array, size) {
          var result = [];
          for (var x = 0; x < Math.ceil(array.length / size); x++) {
              var start = x * size;
              var end = start + size;
              result.push(array.slice(start, end));
          }
          return result;
      },
      //获取个人信息
      getUserInfo:function(callback){
          common.ajax({
              type:'get',
              url:'api/user/'+this.uid+'/info'
          }).then(res=>{
              this.loading = false;
              var userinfo = res.data;
              if(userinfo.user_image.length==0){
                 var user_image = [require('assets/img/banner_default.png')];
                 userinfo.user_image = user_image;
              }
              this.userinfo = userinfo;

              //只有一条数组的时候不轮播
              if(this.userinfo.user_image.length==1){
                this.swiperOptionSimple.loop = false;
                this.swiperOptionSimpleBig.loop = false;
              }
              this.t = localStorage.token;
              if(this.t){
                  this.getCurreny();//查询登陆用户信息*/
              }
              this.getUserHomeCount();
              this.getSkillList();
          }).then(result=>{
            this.loading = false;
            if(this.platform == 'ios'){
              sharePirtureUrl(this.userinfo.user_image[0]);
            }
          })
      },
      //大图关闭显示处理
      bigPicture:function(bool){
          if(bool){
             this.swiper.swiperBig.slideTo(this.bannerIndex+1, 0, true);
             $("#isBig").css({"opacity":1,'z-index':999,'height':'100%'});
             $("#isBig").show();
             $("#swiper").css({'z-index':999});
             $("body,html").addClass("hidden");

          }else{
             this.swiper.swiper.slideTo(this.bannerIndex+1, 0, true);
             $("#isBig").css({"opacity":0,'z-index':0,'height':'auto'});
             $("#isBig").hide();
             $("#swiper").css({'z-index':0});
             $("body,html").removeClass("hidden");
          }
      },
      //获取技能列表
      getSkillList:function(){
          common.ajax({
              type:'GET',
              url:'api/user/'+this.uid+'/adder'
          }).then(res=>{
              this.loading = false;
              var list = res.data; 
              var skillNumber = 0;
              list.map(function(item,key){
                  if(item.stop_order == 0){
                      skillNumber+=1;
                  }
                  var aray = item.star.split('.');
                  if (aray.length>1){
                      item.half_star = aray[1];
                  }
              })
              list.skillNumber = skillNumber;
              this.skillList = list;
              this.getGiftList();
          })
      },
      //下单技能选择
      selectSkill:function(obj){
          this.orderObj = obj;
      },
      //关注处理
      followUser:function(){
            common.ajax({
                url:'api/user/follow/'+this.uid+'/action'
            }).then(res=>{
                common.errMessage(res.info);
                this.userinfo.is_follow = res.data.status;
            })
      },
      //获取用户收入情况接口和房间中数据
      getUserHomeCount:function(){
          common.ajax({
              type:'GET',
              url:'api/user/userHomeCount?uid='+this.uid
          }).then(res=>{
             this.loading = false;
             this.userHomeCount = res.data;
          })
      },
      //礼物查询
      searchGift:function(index){
          this.current = index;
          this.getGiftList();
      },
      //下单步骤显示处理
      placeOrder:function(current){
          if(current == 2){
              if(this.orderObj.adder_id){
                  $(".mobileSelect").remove();//解决步骤二来回进入和返回下拉重复问题
                  this.orderStep = current; //显示第一步技能选择
                  this.getParagraphList();
              }else{
                  common.errMessage('请选择技能！');
              }
              //没有次数时候次数默认为1 
              if(!this.orderObj.times){ //增加判断避免选择之后返回再下一步会回到1
                  this.$set(this.orderObj,'times',1);
              }
          }else if(current == 3){
              var paragraphObjLen = this.paragraphObj.game_regional_locate.length;
              if(paragraphObjLen>0){
                  if(!this.orderObj.regional_id){
                      common.errMessage('请选择大区！');
                      return;
                  }
                  if(paragraphObjLen>1){
                      if(!this.orderObj.grade_id){
                          common.errMessage('请选择时段！');
                          return;
                      }
                  }
              }
              if(!this.orderObj.times){
                  common.errMessage('请选择时长！');
                  return;
              }
              this.orderStep = current; //显示第一步技能选择
              this.calculationMoney();//进入页面计算一下是否需要充值解决返回第二步重新选择时长后返回第三步充值状态不对
              this.getCurreny();
          }else{
              if(current == 1){
                  this.stopAudio();
              }
              this.orderStep = current; //显示第一步技能选择
          }
      },
      //下单支付类型选中和保存处理
      selectPayType:function(type){
          this.pay_type = type;
          this.calculationMoney();
      },
      calculationMoney:function(){
          var outMoney = this.orderObj.times*this.orderObj.price;
          if(this.orderObj.red_packet_id){
              outMoney = (this.orderObj.times*this.orderObj.price)-this.orderObj.reduce_price;
          }
          if(this.pay_type == 3 && (parseInt(this.curreny.money)<parseInt(outMoney))){
              this.isRecharge = true;
          }else{
              this.isRecharge = false;
          }
      },
      //下拉选择处理
      showSelectBox:function(type){
          this.paragraphCurrent = type;
          this.isShowgradBox = true;
          this.temporaryStep = this.orderStep;
          //打开下拉选择时关闭步骤框
          this.orderStep = 0;
      },
      //完成下拉选择
      finishSelect:function(){
          //选择完成后回到订单步骤
          this.orderStep = this.temporaryStep; 
      },
      //根据选择的段位查询段位和大区
      getParagraphList:function(){
          common.ajax({
              type:'GET',
              url:'/api/adder/servicecategory?gameId='+this.orderObj.game_id+'&categoryId='+this.orderObj.adder_service_id
          }).then(response=>{
               this.paragraphObj = response.data;
              //不为空时格式化为数组
              if(response.data.game_regional_locate!=""){
                  this.paragraphObj.game_regional_locate = response.data.game_regional_locate.split(",");
                  var MobileSelect1 = this.MobileSelect(1,response.data.regional);
                  if(this.paragraphObj.game_regional_locate.length>1){
                      var MobileSelect2 = this.MobileSelect(2,response.data.grade);
                  }
              }
              var times=[1,2,3,4,5,6,7,8,9,10];
              var MobileSelect3 = this.MobileSelect(3,times);
          })
      },
      //下拉数据初始化处理
      MobileSelect:function(type,array){
          new MobileSelect({
              trigger: '#trigger'+type,
              title: type==3?'请选择时长':'请选择您的目标'+this.paragraphObj.game_regional_locate[type-1],
              wheels: [
                          {data:array}
                      ],
              position:[0], //初始化定位
              transitionEnd:function(indexArr, data){
              },
              callback:(indexArr, data)=>{
                  if(type == 1){
                      this.$set(this.orderObj,'regional_id',data[0].id);
                      this.$set(this.orderObj,'regional_title',data[0].title);
                  }else if(type == 2){
                      this.$set(this.orderObj,'grade_id',data[0].id);
                      this.$set(this.orderObj,'grade_title',data[0].title);
                  }else{
                      this.$set(this.orderObj,'times',data[0]);
                  }
                  this.finishSelect();
              }  
          });
      },
      handleChange:function(index){
        this.defaultIndex = index;
      },
      handleChangeBig:function(index){
        //console.log(index);
        this.defaultIndexBig = index;
      },
      //获取礼物墙数据
      getGiftList:function(){
          common.ajax({
              type:'GET',
              url:'api/user/userGiftWall?uid='+this.uid+'&type='+this.current
          }).then(res=>{
               this.loading = false;
               this.giftObj = res.data;
               this.giftList = res.data.list 
               /*this.sliceArray(res.data.list,8);
               if(this.giftList.length>0){
                   if(number!=0){
                    this.swiper.swiperGift.slideTo(0,1000,false);
                 }
               }*/
          })
      },
      //获取当余额接口
      getCurreny:function(){
          common.ajax({
              type:'GET',
              url:'api/user/getuserinfo'
          }).then(res=>{
              this.curreny = res.data;
          })
      },
      //提交订单接口
      submitOrder:function(){
          var _this = this;
          var  time = encodeURI(new Date().Format("yyyy-MM-dd hh:mm"));
          if(!this.pay_type){
              common.errMessage('请选择支付方式！');
              return;
          }
          var red_packet_id = this.orderObj.red_packet_id;
          if(!red_packet_id){
              red_packet_id = 0;
          }
          common.ajax({
              url:'api/adder/'+this.orderObj.adder_id+'/store/order?begin_time='+time+'&regional_id='+this.orderObj.regional_id+'&grade_id='+this.orderObj.grade_id+'&num='+this.orderObj.times+'&red_packet_id='+red_packet_id+'&pay_type='+this.pay_type+'&message='
          }).then(res=>{
              payFun(res.data);
          })
      },
      //选择优惠券后获取值
      getCouponItem(){
          var coupon = localStorage.coupon;
          if(coupon){
              coupon = JSON.parse(coupon);
              this.$set(this.orderObj,'limit_price',coupon.limit_price);
              this.$set(this.orderObj,'reduce_price',coupon.price);
              this.$set(this.orderObj,'red_packet_id',coupon.id);
          }
          this.calculationMoney();
      },
      enterCoupon(){
          this.$router.push({path: '/coupon?adderId=' + this.orderObj.adder_id + "&times=" + this.orderObj.times});
      },
      //发消息
      sendMessageFun:function(){
        this.stopAudio();
        window.sendMessageFun();
      },
      //进入聊天室
      enterRoomFun:function(){
        this.stopAudio();
        window.enterRoomFun();
      },
      //下单余额不足去充值
      rechargeFun:function(){
        window.rechargeFun();
      },
      //支付
      payFun:function(res){
        window.payFun(res);
      },
      //分享图片封面第一张
      sharePirtureUrl:function(sharePirture){
        window.sharePirtureUrl(sharePirture);
      },
      getRechargeResult:function(){
        window.getRechargeResult();
      }
  }
} 
</script>


